<template>
  <div>
    <!-- 头部 -->
    <userTitel :title="title"></userTitel>
    <!-- 卡片 -->
    <el-card shadow="never">
      <el-button @click="addMo">新增模板</el-button>
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%">
        <!-- :formatter="formatter" -->
        <el-table-column
          :formatter="formatter"
          prop="templateType"
          label="模板类型"
        >
        </el-table-column>
        <el-table-column
          :formatter="formatter1"
          prop="transportType"
          label="运送类型"
        >
        </el-table-column>
        <el-table-column
          :formatter="formatter2"
          prop="associatedCityList"
          label="关联城市"
        >
        </el-table-column>
        <el-table-column prop="firstWeight" label="首重"> </el-table-column>
        <el-table-column prop="continuousWeight" label="续重">
        </el-table-column>
        <el-table-column prop="lightThrowingCoefficient" label="轻抛系数">
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-link
              @click="edit(row)"
              :underline="false"
              style="color: #419eff"
              >编辑</el-link
            >
            <span style="color: #dcdfe6"> |</span>
            <el-link
              @click="delCount(row.id)"
              :underline="false"
              style="color: #f76c9b"
              >删除</el-link
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 弹框 -->

    <el-dialog title="新增模板" :visible.sync="dialogFormVisible">
      <el-form
        ref="rulesRef"
        :rules="rules"
        style="margin: 26 px"
        :model="form"
      >
        <!-- 模板类型 -->
        <el-form-item label="模板类型" prop="templateType">
          <el-select placeholder="请选择模板类型" v-model="form.templateType">
            <el-option
              v-for="(item, index) in moType"
              :key="index"
              :label="item.value"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 运送类型 -->
        <el-form-item prop="transportType" label="请选择运送类型">
          <el-select placeholder="请选择运送类型" v-model="form.transportType">
            <el-option
              v-for="(item, index) in yunType"
              :key="index"
              :label="item.value"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 关联城市 -->
        <el-form-item prop="associatedCityList" label="关联城市"
          ><span>全国</span></el-form-item
        >
        <!-- 首重价格 -->
        <el-form-item prop="firstWeight" label="首重价格">
          <el-input placeholder="请输入首重价格" v-model="form.firstWeight">
            <template #suffix>
              <span style="font-weight: 600; color: #333">元</span>
            </template>
          </el-input>
        </el-form-item>
        <!-- 续重价格 -->
        <el-form-item prop="continuousWeight" label="续重价格">
          <el-input
            placeholder="请输入续重价格"
            v-model="form.continuousWeight"
          >
            <template #suffix>
              <span style="font-weight: 600; color: #333">元</span>
            </template>
          </el-input>
        </el-form-item>
        <!-- 轻抛系数 -->
        <el-form-item prop="lightThrowingCoefficient" label="轻抛系数">
          <el-input
            placeholder="请输入轻抛系数"
            v-model="form.lightThrowingCoefficient"
          >
          </el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDialog">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getMoveList,
  addMove,
  xiugaiMove,
  delList,
} from "@/api/freight-manage";
import arr from "@/api/yingSheBiao";
export default {
  name: "dddd-s",
  data() {
    return {
      title: "运费管理",
      // 列表渲染
      tableData: [],
      dialogFormVisible: false, //弹层
      form: {
        id: "",
        templateType: "", // 模板类型
        transportType: "", // 运送类型
        associatedCityList: [], // 关联城市
        firstWeight: 0, // 首重价格
        continuousWeight: 0, // 续重价格
        lightThrowingCoefficient: 0, // 轻抛系数
      },
      // 校验
      rules: {
        templateType: [
          { required: true, message: "请输入模板类型", trigger: "blur" },
        ], // 模板类型
        transportType: [
          { required: true, message: "请输入运送类型", trigger: "blur" },
        ], // 运送类型
        associatedCityList: [], // 关联城市
        firstWeight: [
          { required: true, message: "请输入首重价格", trigger: "blur" },
        ], // 首重价格
        continuousWeight: [
          { required: true, message: "请输入续重价格", trigger: "blur" },
        ], // 续重价格
        lightThrowingCoefficient: [
          { required: true, message: "请输入轻抛系数", trigger: "blur" },
        ], // 轻抛系数
      },
      // 模板类型
      moType: [],
      // 运送类型
      yunType: [],
      // 关联城市
      cityType: [],
    };
  },
  computed: {
    // cityArr() {
    //   return this.moType.forEach((item) => {
    //     if (item.value == "经济区互寄") {
    //       return this.cityType.filter((item1) => {
    //         return item1.value != "全国";
    //       });
    //     }
    //   });
    // },
  },

  created() {
    this.getList();
  },

  methods: {
    async getList() {
      const res = await getMoveList();
      console.log(res.data);
      this.tableData = res.data;
    },
    // 模板类型
    formatter(row, col, cel) {
      this.moType = arr.templateType;
      const newNum = arr.templateType.map((item) => {
        // console.log(item);
        if (cel === item.id) {
          return item.value;
        }
      });
      return newNum;
    },
    // 运送类型
    formatter1(row, col, cel) {
      this.yunType = arr.transportType;
      const newNum = arr.transportType.map((item) => {
        // console.log(item);
        if (cel === item.id) {
          return item.value;
        }
      });
      return newNum;
    },
    // 关联城市
    formatter2(row, col, cel) {
      // console.log(row);
      // console.log(col);
      // console.log(cel);
      this.cityType = arr.cityType;
      const newNum = arr.cityType.map((item) => {
        // console.log(item);
        if (cel[0] === item.id) {
          return item.value;
        }
      });
      return newNum;
    },
    addMo() {
      this.dialogFormVisible = true;
      console.log(this.form.id);
    },
    // 提交
    async addDialog() {
      if (this.form.id) {
        const res = await xiugaiMove(this.form);
        console.log(res);
      } else {
        console.log(this.form);
        // await this.$refs.rulesRef.validate();
        const res = await addMove(this.form);
        console.log(res);
      }
    },
    // 回显
    edit(row) {
      console.log(row);
      // arr.templateType.map((itemOne) => {
      //   console.log(itemOne.value);
      //   for (let item in row) {
      //     console.log(item); //值
      //     console.log(row[item]); //值
      //     if (row[item] == itemOne.id) {
      //       console.log((row[item] = itemOne.value));
      //     }
      //   }
      // });
      this.dialogFormVisible = true;
      this.form = row;
      console.log(this.form);
    },
    // 删除
    delCount(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await delList(id);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-dialog__footer {
  padding-bottom: 80px;
  padding-left: 200px;
}
span {
  margin-right: 10px;
}
.el-input {
  width: 400px;
}
::v-deep .el-dialog__body {
  margin-left: 30px;
  margin-right: 30px;
}
::v-deep .el-dialog {
  width: 30% !important;
}
::v-deep .el-form-item__content {
  text-align: left !important;
}
::v-deep .el-dialog__title {
  line-height: 24px !important;
  text-align: left !important;
  margin-top: 10px;
  // float: left;
}
::v-deep .el-dialog__header {
  background-color: #f3f4f7;
  line-height: 24px !important;
  text-align: left !important;
  // float: left;
}
::v-deep .el-table th.el-table__cell > .cell {
  background-color: #f8faff;
  height: 50px;
  margin-bottom: -20px;
  line-height: 2.5;
  margin-top: -130px;
  border: 1px solid #ebeef5;
}
::v-deep .el-table__header-wrapper {
  background-color: #f8faff;
  height: 51px;
}
.el-button {
  float: left;
  background-color: #e15536;
  color: #fff;
}
</style>
